import React, { useState } from 'react';
import { Calendar, TrendingUp, MapPin, Users } from 'lucide-react';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';
import { useNavigate } from 'react-router-dom';
import MonthPicker from './MonthPicker';

const albums = [
  {
    id: 1,
    title: '20240506北京团队春雷行动',
    location: '浙江 金华',
    date: '2024.05.06',
    views: '36544',
    category: 'spring-thunder',
    categoryName: '春雷行动',
    participants: 125,
    image: 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&q=80&w=500'
  },
  {
    id: 2,
    title: '20240506上海团队骄阳行动',
    location: '浙江 金华',
    date: '2024.05.06',
    views: 35544,
    category: 'sunshine',
    categoryName: '骄阳行动',
    participants: 98,
    image: 'https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&q=80&w=500'
  },
  {
    id: 3,
    title: '20240505广州团队客户答谢会',
    location: '浙江 金华',
    date: '2024.05.05',
    views: 36544,
    category: 'customer-thanks',
    categoryName: '客户答谢会',
    participants: 156,
    image: 'https://images.unsplash.com/photo-1511578314322-379afb476865?auto=format&fit=crop&q=80&w=500'
  }
];

export default function MainContent() {
  const navigate = useNavigate();
  const [showMonthPicker, setShowMonthPicker] = useState(false);
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [sortByViews, setSortByViews] = useState(false);
  const [displayAlbums, setDisplayAlbums] = useState(albums);

  const handleMonthSelect = (date: Date) => {
    setSelectedDate(date);
    setShowMonthPicker(false);
    // 这里可以添加按月份筛选的逻辑
  };

  const toggleSort = () => {
    setSortByViews(!sortByViews);
    const sorted = [...displayAlbums].sort((a, b) => {
      return sortByViews
        ? Number(a.views) - Number(b.views)
        : Number(b.views) - Number(a.views);
    });
    setDisplayAlbums(sorted);
  };

  return (
    <main className="flex-1 bg-gray-50 px-4 py-6">
      {/* 筛选工具栏 */}
      <div className="flex justify-between items-center mb-6">
        <div className="relative">
          <button
            onClick={() => setShowMonthPicker(!showMonthPicker)}
            className="flex items-center space-x-2 px-4 py-2 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition-colors"
          >
            <Calendar className="w-5 h-5 text-blue-500" />
            <span className="text-gray-700">
              {format(selectedDate, 'yyyy.MM', { locale: zhCN })}
            </span>
          </button>
          {showMonthPicker && (
            <MonthPicker
              selectedDate={selectedDate}
              onSelect={handleMonthSelect}
              onClose={() => setShowMonthPicker(false)}
            />
          )}
        </div>
        <button
          onClick={toggleSort}
          className="flex items-center space-x-2 px-4 py-2 bg-white rounded-xl shadow-sm hover:bg-gray-50 transition-colors"
        >
          <TrendingUp className="w-5 h-5 text-blue-500" />
          <span className="text-gray-700">热度{sortByViews ? '↓' : '↑'}</span>
        </button>
      </div>

      {/* 相册列表 */}
      <div className="space-y-6">
        {displayAlbums.map((album) => (
          <div
            key={album.id}
            onClick={() => navigate(`/detail/${album.id}`)}
            className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer group"
          >
            <div className="relative">
              <img
                src={album.image}
                alt={album.title}
                className="w-full h-48 object-cover transform group-hover:scale-105 transition-transform duration-300"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
              <div className="absolute top-4 left-4">
                <span className="px-3 py-1.5 bg-blue-500 text-white text-sm font-medium rounded-full">
                  {album.categoryName}
                </span>
              </div>
              <div className="absolute top-4 right-4 flex items-center space-x-2">
                <span className="px-3 py-1.5 bg-black/30 backdrop-blur-sm text-white text-sm rounded-full flex items-center">
                  <Users className="w-4 h-4 mr-1" />
                  {album.participants}
                </span>
                <span className="px-3 py-1.5 bg-black/30 backdrop-blur-sm text-white text-sm rounded-full">
                  {album.views} 浏览
                </span>
              </div>
            </div>
            <div className="p-4">
              <h3 className="text-lg font-medium text-gray-900 mb-2">{album.title}</h3>
              <div className="flex items-center justify-between text-sm text-gray-500">
                <div className="flex items-center">
                  <MapPin className="w-4 h-4 mr-1" />
                  {album.location}
                </div>
                <span>{album.date}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </main>
  );
}